<%--
  Created by IntelliJ IDEA.
  User: YNA-User
  Date: 2019/12/23
  Time: 9:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<link href='../css/fullcalendar.css' rel='stylesheet' />
<link href='../css/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='../javascript/moment.min.js'></script>
<script src='../javascript/jquery.min.js'></script>
<script src='../javascript/fullcalendar.js'></script>
<script>

    function dateFormat(fmt, date) {
        var ret;
        var opt = {
            "Y+": date.getFullYear().toString(),        // 年
            "M+": (date.getMonth() + 1).toString(),     // 月
            "d+": date.getDate().toString(),            // 日
            "H+": date.getHours().toString(),           // 时
            "m+": date.getMinutes().toString(),         // 分
            "S+": date.getSeconds().toString()          // 秒
            // 有其他格式化字符需求可以继续添加，必须转化成字符串
        };
        for (var k in opt) {
            ret = new RegExp("(" + k + ")").exec(fmt);
            if (ret) {
                fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
            };
        };
        return fmt;
    }

    $(document).ready(function () {

        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            height: 'parent',
            defaultDate: '2017-10-12',
            defaultView: "agendaWeek",
            slotLabelInterval: 30, // 左侧时间间隔
            navLinks: true, // can click day/week names to navigate views
            editable: true,
            eventLimit: true, // allow "more" link when too many events
            businessHours: {
                dow: [0, 1, 2, 3, 4, 5, 6],
                start: '8:00',
                end: '20:00'
            },
            selectable: true,
            selectHelper: true,
            select: function (start, end) {
                
                var title = prompt('Event Title:');
                var eventData;
                if (title) {
                    eventData = {
                        id: title,
                        title: title,
                        start: start,
                        end: end
                    };
                    // 添加事件
                    $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
                }
                $('#calendar').fullCalendar('unselect');
            },
            eventClick: function (calEvent, jsEvent, view) {
                

                $("input[name='id']").val(calEvent.id);
                $("input[name='title']").val(calEvent.title);
                $("input[name='startTime']").val(calEvent.start);
                $("input[name='endTime']").val(calEvent.end);

                $("div[id='showDiv']").css('display', 'block');

                $("button[id='myDelete']").on('click', calEvent, function () {
                    $("#calendar").fullCalendar("removeEvents", calEvent.id);
                });

                $("button[id='myUpdate']").onclick = function () {
                    calEvent.id = $("input[name='id']").val();
                    calEvent.title = $("input[name='title']").val();
                    calEvent.start = ("input[name='startTime']").val();
                    calEvent.end = $("input[name='endTime']").val();

                    $("#calendar").fullCalendar("updateEvent", calEvent);
                }

            },
            events: [
                {
                    id: 1,
                    title: 'All Day Event',
                    start: '2017-10-01',
                },
                {
                    id: 2,
                    title: 'Long Event',
                    start: '2017-10-07',
                    end: '2017-10-10'
                },
                {
                    id: 999,
                    title: 'Repeating Event',
                    start: '2017-10-09T16:00:00'
                },
                {
                    id: 3,
                    title: 'Repeating Event',
                    start: '2017-10-16T16:00:00'
                },
                {
                    id: 34,
                    title: 'Conference',
                    start: '2017-10-11',
                    end: '2017-10-13'
                },
                {
                    id: 45,
                    title: 'Meeting',
                    start: '2017-10-12T10:30:00',
                    end: '2017-10-12T12:30:00'
                },
                {
                    id: 12,
                    title: 'Lunch',
                    start: '2017-10-12T12:00:00'
                }
            ]
        });

    });

    function myClons() {
        $("div[id='showDiv']").css('display', 'none');
    }



</script>
<style>
    html,
    body {
        overflow: hidden;
        /* don't do scrollbars */
        font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
        font-size: 14px;
    }

    #calendar-container {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .fc-header-toolbar {
        /*
the calendar will be butting up against the edges,
but let's scoot in the header's buttons
*/
        padding-top: 1em;
        padding-left: 1em;
        padding-right: 1em;
    }
</style>
</head>

<body>

<div id='calendar-container'>
    <div id='calendar'></div>
</div>


<div id="showDiv"
     style="display: none;width: 300px;height: 200px;background-color: aquamarine;position: absolute;top: 19px;z-index: 999;">
    <form id="myForm">
        <input type="text" name="id" /><br />
        <input type="text" name="title" /><br />
        <input type="text" name="startTime" /><br />
        <input type="text" name="endTime" /><br />
        <button onclick="myClons()">关闭</button>
        <button id="myDelete">删除</button>
        <button id="myUpdate">更新</button>
    </form>
</div>
</body>

</html>